<template>
  <div class="admin-subapp">
    <el-container style="height: 100vh;">
      <el-aside width="200px">
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical"
          @select="handleMenuSelect"
        >
          <el-menu-item index="dashboard">
            <i class="el-icon-s-data"></i>
            <span>仪表盘</span>
          </el-menu-item>
          <el-menu-item index="users">
            <i class="el-icon-user"></i>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="orders">
            <i class="el-icon-s-order"></i>
            <span>订单管理</span>
          </el-menu-item>
          <el-menu-item index="analytics">
            <i class="el-icon-s-marketing"></i>
            <span>数据分析</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      
      <el-container>
        <el-header>
          <div class="header-content">
            <h2>管理后台子应用</h2>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                管理员 <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人资料</el-dropdown-item>
                  <el-dropdown-item command="settings">设置</el-dropdown-item>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        
        <el-main>
          <component :is="currentComponent" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Dashboard from './components/Dashboard.vue'
import Users from './components/Users.vue'
import Orders from './components/Orders.vue'
import Analytics from './components/Analytics.vue'

export default {
  name: 'AdminSubApp',
  components: {
    Dashboard,
    Users,
    Orders,
    Analytics
  },
  data() {
    return {
      activeMenu: 'dashboard',
      currentComponent: 'Dashboard'
    }
  },
  methods: {
    handleMenuSelect(key) {
      this.activeMenu = key
      this.currentComponent = this.getComponentName(key)
    },
    getComponentName(key) {
      const componentMap = {
        dashboard: 'Dashboard',
        users: 'Users',
        orders: 'Orders',
        analytics: 'Analytics'
      }
      return componentMap[key] || 'Dashboard'
    },
    handleCommand(command) {
      this.$message.success(`执行命令: ${command}`)
    }
  }
}
</script>

<style scoped>
.admin-subapp { height: 100vh; }
.header-content { display: flex; justify-content: space-between; align-items: center; }
.el-dropdown-link { cursor: pointer; color: #409EFF; }
</style>
